<script lang="ts" setup>
import { onMounted, watch } from 'vue'; // 引入 Vue 的生命周期钩子
import type { MindElixirData } from 'mind-elixir';
import MindElixir from 'mind-elixir'; // 引入 MindElixir

interface MindMapProps {
  data: MindElixirData; // 定义 props 的类型
}

// 接收 props
const props = defineProps<MindMapProps>();

onMounted(() => {
  const mind = new MindElixir({
    el: '#map', // 渲染脑图的DOM元素
    direction: MindElixir.RIGHT, // 脑图的方向
    draggable: false, // 禁用节点拖动
    contextMenu: false, // 禁用右键菜单
    toolBar: true, // 隐藏工具栏
    keypress: false, // 禁用键盘操作
    editable: false, // 设置为不可编辑
  });

  mind.init(props.data); // 使用传入的数据初始化脑图

  // 如果 data 更新，重新初始化脑图
  watch(
    () => props.data,
    (newData) => {
      mind.init(newData); // 使用新数据重新初始化脑图
    },
  );
});
</script>

<template>
  <div id="map" style="width: 100%; height: 750px" />
</template>

<style scoped>
/* 添加样式（如果需要自定义样式） */
</style>
